<!--
*  功能描述：合同列表页面
 -->
<template>
  <div style="">
    <!-- 查询条件显示项 -->
    <div>
      <el-dropdown split-button type="primary" size="mini">
        查询条件显示项
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <el-checkbox v-model="getcondition.contractNumber">合同编号</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="getcondition.contractName">合同名称</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="getcondition.mingetDrawingNum">已出图纸套数</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="getcondition.mindrawingNum">图纸套数</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="getcondition.ownerDirector">甲方负责人</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="getcondition.projectDirector">工程负责人</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="getcondition.ownerType">甲方类型</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="getcondition.minbuildingArea">建筑面积</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="getcondition.subsidiary">子公司</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="getcondition.begincreateTime">合同签约日期</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="getcondition.minfloorNum">差旅次数</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="getcondition.mingetFloorNum">已出差旅次数</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="getcondition.projectPlace">工程地点</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="getcondition.development">建设单位</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="getcondition.minoriginalContractPrice">原始合同额</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="getcondition.minrealyContractPrice">实际合同额</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="getcondition.contractType">合同分类</el-checkbox>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button icon="el-icon-search" circle @click="GetShowData()" size="mini" style="margin-left: 10px;"></el-button>
    </div>
    <!-- 查询条件 -->
    <div>
      <el-form ref="form" :model="contractShowCondition" label-width="80px">
        <el-row>
          <el-col :span="6" v-show="getcondition.contractName">
            <div>
              <el-form-item label="合同名称" style="width: 300px">
                <el-input v-model="contractShowCondition.contractName"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6" v-show="getcondition.contractNumber">
            <div>
              <el-form-item label="合同编号" style="width: 300px">
                <el-input v-model="contractShowCondition.contractNumber"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6" v-show="getcondition.contractType">
            <div>
              <el-form-item label="合同分类" style="width: 300px">
                <el-select v-model="contractShowCondition.contractType" placeholder="请选择合同分类">
                  <el-option label="请选择" value=""></el-option>
                  <el-option label="工程咨询合同" value="工程咨询合同"></el-option>
                  <el-option label="工程总承包合同" value="工程总承包合同"></el-option>
                  <el-option label="工程代建合同" value="工程代建合同"></el-option>
                  <el-option label="项目协议" value="项目协议"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6" v-show="getcondition.development">
            <div>
              <el-form-item label="建设单位" style="width: 300px">
                <el-input v-model="contractShowCondition.development"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6" v-show="getcondition.projectDirector">
            <div>
              <el-form-item label="工程负责人" style="width: 300px">
                <el-input v-model="contractShowCondition.projectDirector"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6" v-show="getcondition.ownerDirector">
            <div>
              <el-form-item label="甲方负责人" style="width: 300px">
                <el-input v-model="contractShowCondition.ownerDirector"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6" v-show="getcondition.minoriginalContractPrice">
            <div>
              <el-form-item label="原始合同额" style="width: 300px">
                <el-input v-model="contractShowCondition.minoriginalContractPrice"></el-input>
                <el-input v-model="contractShowCondition.maxoriginalContractPrice"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6" v-show="getcondition.minrealyContractPrice">
            <div>
              <el-form-item label="实际合同额" style="width: 300px">
                <el-input v-model="contractShowCondition.minrealyContractPrice"></el-input>
                <el-input v-model="contractShowCondition.maxrealyContractPrice"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6" v-show="getcondition.subsidiary">
            <div>
              <el-form-item label="子公司" style="width: 300px">
                <el-input v-model="contractShowCondition.subsidiary"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6" v-show="getcondition.ownerType">
            <div>
              <el-form-item label="甲方类型" style="width: 300px">
                <el-select v-model="contractShowCondition.ownerType" placeholder="请选择甲方类型">
                  <el-option label="请选择" value=""></el-option>
                  <el-option label="北京政府" value="北京政府"></el-option>
                  <el-option label="宁夏政府" value="宁夏政府"></el-option>
                  <el-option label="华润置地" value="华润置地"></el-option>
                  <el-option label="海亮地产" value="海亮地产"></el-option>
                  <el-option label="华夏地产" value="华夏地产"></el-option>
                  <el-option label="北京城建" value="北京城建"></el-option>
                  <el-option label="其他" value="其他"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6" v-show="getcondition.minbuildingArea">
            <div>
              <el-form-item label="建筑面积" style="width: 300px">
                <el-input v-model="contractShowCondition.minbuildingArea"></el-input>
                <el-input v-model="contractShowCondition.maxbuildingArea"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6" v-show="getcondition.mindrawingNum">
            <div>
              <el-form-item label="图纸套数" style="width: 300px">
                <el-input v-model="contractShowCondition.mindrawingNum"></el-input>
                <el-input v-model="contractShowCondition.maxdrawingNum"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6" v-show="getcondition.minfloorNum">
            <div>
              <el-form-item label="差旅次数" style="width: 300px">
                <el-input v-model="contractShowCondition.minfloorNum"></el-input>
                <el-input v-model="contractShowCondition.maxfloorNum"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6" v-show="getcondition.projectPlace">
            <div>
              <el-form-item label="工程地点" style="width: 300px">
                <el-input v-model="contractShowCondition.projectPlace"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6" v-show="getcondition.begincreateTime">
            <div>
              <el-form-item label="签约日期" style="width: 300px">
                <el-input type="date" v-model="contractShowCondition.begincreateTime"></el-input>
                <el-input type="date" v-model="contractShowCondition.endcreateTime"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6" v-show="getcondition.mingetDrawingNum">
            <div>
              <el-form-item label="已出图纸套数" style="width: 300px">
                <el-input v-model="contractShowCondition.mingetDrawingNum"></el-input>
                <el-input v-model="contractShowCondition.maxgetDrawingNum"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6" v-show="getcondition.mingetFloorNum">
            <div>
              <el-form-item label="已出差旅次数" style="width: 300px">
                <el-input v-model="contractShowCondition.mingetFloorNum"></el-input>
                <el-input v-model="contractShowCondition.mingetFloorNum"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 表格显示项 -->
    <div>
      <el-dropdown split-button type="primary" size="mini">
        表格显示项
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <el-checkbox v-model="show.contractNumber">合同编号</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="show.contractName">合同名称</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="show.development">建设单位</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="show.telePhone1">甲方负责人电话</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="show.telePhone2">工程负责人电话</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="show.getDrawingNum">已出图纸套数</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="show.drawingNum">图纸套数</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="show.ownerDirector">甲方负责人</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="show.projectDirector">工程负责人</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="show.contraownerTypetNumber">甲方类型</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="show.buildingArea">建筑面积</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="show.subsidiary">子公司</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="show.createTime">合同签约日期</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="show.floorNum">差旅次数</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="show.getFloorNum">已出差旅次数</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="show.projectPlace">工程地点</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="show.originalContractPrice">原始合同额</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="show.realyContractPrice">实际合同额</el-checkbox>
          </el-dropdown-item>

          <el-dropdown-item>
            <el-checkbox v-model="show.sumProceeds">收费总额</el-checkbox>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!-- 表格 -->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="contractNumber" label="合同编号" v-if="show.contractNumber">
        </el-table-column>
        <el-table-column prop="contractName" label="合同名称" v-if="show.contractName">
        </el-table-column>
        <el-table-column prop="development" label="建设单位" v-if="show.development">
        </el-table-column>
        <el-table-column prop="telePhone1" label="甲方负责人电话" v-if="show.telePhone1">
        </el-table-column>
        <el-table-column prop="telePhone2" label="工程负责人电话" v-if="show.telePhone2">
        </el-table-column>
        <el-table-column prop="getDrawingNum" label="已出图纸套数" v-if="show.getDrawingNum">
        </el-table-column>
        <el-table-column prop="drawingNum" label="图纸套数" v-if="show.drawingNum">
        </el-table-column>
        <el-table-column prop="ownerDirector" label="甲方负责人" v-if="show.ownerDirector">
        </el-table-column>
        <el-table-column prop="projectDirector" label="工程负责人" v-if="show.projectDirector">
        </el-table-column>
        <el-table-column prop="ownerType" label="甲方类型" v-if="show.ownerType">
        </el-table-column>
        <el-table-column prop="contractType" label="合同分类" v-if="show.contractType">
        </el-table-column>
        <el-table-column prop="buildingArea" label="建筑面积" v-if="show.buildingArea">
        </el-table-column>

        <el-table-column prop="subsidiary" label="子公司" v-if="show.subsidiary">
        </el-table-column>
        <el-table-column prop="createTime" label="合同签约日期" v-if="show.createTime">
        </el-table-column>
        <el-table-column prop="floorNum" label="差旅次数" v-if="show.floorNum">
        </el-table-column>
        <el-table-column prop="getFloorNum" label="已出差旅次数" v-if="show.getFloorNum">
        </el-table-column>
        <el-table-column prop="projectPlace" label="工程地点" v-if="show.projectPlace">
        </el-table-column>
        <el-table-column prop="originalContractPrice" label="原始合同额" v-if="show.originalContractPrice">
        </el-table-column>
        <el-table-column prop="realyContractPrice" label="实际合同额" v-if="show.realyContractPrice">
        </el-table-column>
        <el-table-column prop="sumProceeds" label="收费总额" v-if="show.sumProceeds">
        </el-table-column>
        <el-table-column label="操作" style="width: 500px">
          <template slot-scope="scope">
            <el-button size="mini" @click="GoContractEcho(scope.row.contractId)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.contractId)">删除</el-button>
            <el-button size="mini" type="danger" @click="OpenGetContractrate(scope.row)">收费</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 收费模态框 -->
    <div>
      <el-dialog title="收费" :visible.sync="rateDialogVisible" width="60%">
        <!-- 收费列表 -->
        <div>
          <el-table :data="contractratetable" height="250" border style="width: 100%">
            <el-table-column prop="contractName" label="合同名称" width="180">
            </el-table-column>
            <el-table-column prop="payeeName" label="收费项名称" width="180">
            </el-table-column>
            <el-table-column prop="realyProceeds" label="收费额">
            </el-table-column>
            <el-table-column prop="adm" label="收费比例">
              <template slot-scope="scope"> {{ scope.row.adm }}% </template>
            </el-table-column>
            <el-table-column prop="projectDirector" label="收费人" width="180">
            </el-table-column>
            <el-table-column prop="staproceedsTime" label="收款日期">
            </el-table-column>
            <el-table-column prop="remark" label="备注"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="GetUpcontractrate(scope.row)" type="text" size="small">修改</el-button>
                <el-button type="text" size="small" @click="DelRate(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 收费表单 -->
        <div>
          <el-form ref="form" :model="rate" label-width="80px">
            <el-row>
              <el-col :span="8">
                <div>
                  <el-form-item label="合同名称">
                    <el-input v-model="rate.contractName" disabled></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <el-form-item label="收款人">
                    <el-input v-model="rate.projectDirector" disabled></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <el-form-item label="合同额">
                    <el-input v-model="rate.realyContractPrice" disabled></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </el-form>
          <el-form ref="form" :model="contractrate" label-width="80px">
            <el-row>
              <el-col :span="8">
                <div>
                  <el-form-item label="收费日期">
                    <el-input type="date" v-model="contractrate.ProceedsTime"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <el-form-item label="收费项">
                    <el-input v-model="contractrate.PayeeName"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <el-form-item label="收费金额">
                    <el-input v-model="contractrate.RealyProceeds"></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                  <el-form-item label="备注" prop="desc">
                    <el-input type="textarea" v-model="contractrate.Remark"></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="rateDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="Upcontractrate()" v-if="upRate">修改</el-button>
          <el-button type="primary" @click="AddcontractRate()">确定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 分页 -->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageindex"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalcount"
      >
      </el-pagination>
    </div> 
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      pageindex: 1,
      pagesize: 1,

      totalcount: 0,
      contractShowCondition: {
        contractName: "",
        contractNumber: "",
        contractType: "",
        development: "",
        projectDirector: "",
        ownerDirector: "",
        minoriginalContractPrice: "",
        maxoriginalContractPrice: "",
        minrealyContractPrice: "",
        maxrealyContractPrice: "",
        ownerType: "",
        minbuildingArea: "",
        maxbuildingArea: "",
        mindrawingNum: "",
        maxdrawingNum: "",
        mingetDrawingNum: "",
        maxgetDrawingNum: "",
        subsidiary: "",
        begincreateTime: "",
        endcreateTime: "",
        minfloorNum: "",
        maxfloorNum: "",
        mingetFloorNum: "",
        maxgetFloorNum: "",
        projectPlace: "",
      },
      show: {
        contractId: true,
        contractNumber: true,
        contractName: true,
        development: true,
        structuralstyleId: true,
        projectDirector: true,
        ownerDirector: true,
        originalContractPrice: false,
        drawingNum: false,
        getDrawingNum: false,
        buildingType: false,
        telePhone1: false,
        telePhone2: false,
        realyContractPrice: false,
        floorNum: false,
        getFloorNum: false,
        contractType: false,
        ownerType: false,
        buildingArea: false,
        subsidiary: false,
        projectPlace: false,
        createTime: false,
        contractState: false,
        contractRemarks: false,
        clientId: false,
        contractextText: false,
        contractRateState: false,
        sumProceeds: false,
      },
      getcondition: {
        contractName: true,
        contractNumber: true,
        contractType: true,
        development: true,
        projectDirector: false,
        ownerDirector: false,
        minoriginalContractPrice: false,
        maxoriginalContractPrice: false,
        minrealyContractPrice: false,
        maxrealyContractPrice: false,
        ownerType: false,
        minbuildingArea: false,
        maxbuildingArea: false,
        mindrawingNum: false,
        maxdrawingNum: false,
        mingetDrawingNum: false,
        maxgetDrawingNum: false,
        subsidiary: false,
        begincreateTime: false,
        endcreateTime: false,
        minfloorNum: false,
        maxfloorNum: false,
        mingetFloorNum: false,
        maxgetFloorNum: false,
        projectPlace: false,
      },
      //收费
      rateDialogVisible: false,
      //收费列表
      contractratetable: [],
      //收费表单
      contractrate: {
        ContractrateId: "",
        ContractId: "",
        PayeeName: "",
        RealyProceeds: 0,
        ProceedsTime: "",
        Remark: "",
      },
      rate: {
        contractName: "",
        projectDirector: "",
        realyContractPrice: 0,
      },
      //判断修改字段
      upRate: false,
    };
  },
  methods: {
    handleEdit (index, row) {
      console.log(index, row);
    },
    handleSizeChange (val) {
      this.pagesize = val;
      this.GetShowData();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      this.pageindex = val;
      this.GetShowData();
      console.log(`当前页: ${val}`);
    },
    GetShowData () {
      this.$http
        .post(
          `Contrac/GetContractInfos?pageindex=${this.pageindex}&pagesize=${this.pagesize}`,
          this.contractShowCondition
        )
        .then((res) => {
          this.tableData = res.data.PageData;
          this.totalcount = res.data.PageTotal;
        });
    },
    //跳转反填页面
    GoContractEcho (row) {
      this.$router.push("/contractEcho/" + row);
    },
    //删除
    handleDelete (id) {
      this.$http.get(`Contrac/DelContractInfos?id=${id}`).then((res) => {
        if (res.data > 0) {
          alert("合同删除成功");
          this.GetShowData();
        }
      });
    },
    //获取修改信息
    GetUpcontractrate (row) {
      this.contractrate.ContractrateId = row.contractrateId;
      this.contractrate.ContractId = row.contractId;
      this.contractrate.PayeeName = row.payeeName;
      this.contractrate.RealyProceeds = row.realyProceeds;
      this.contractrate.ProceedsTime = row.staproceedsTime;
      this.contractrate.Remark = row.remark;
      this.upRate = true;
    },
    //修改收费信息
    Upcontractrate () {
      this.$http
        .post("Contrac/UpContractrateInfo", this.contractrate)
        .then((res) => {
          if (res.data > 0) {
            alert("修改成功");
          }
        });
    },
    //删除收费列表
    DelRate (row) {
      this.$http
        .get(`Contrac/DelContractrateInfo?id=${row.contractrateId}`)
        .then((res) => {
          if (res.data > 0) {
            alert("删除成功");
            this.rateDialogVisible = false;
          }
        });
    },
    //打开收费模态
    OpenGetContractrate (row) {
      this.upRate = false;
      this.contractrate = {};
      this.$http
        .get(
          `Contrac/GetContractLists?id=${row.contractId}`
        )
        .then((res) => {
          this.contractratetable = res.data;
        });
      this.rate.contractName = row.contractName;
      this.rate.projectDirector = row.projectDirector;
      this.rate.realyContractPrice = row.realyContractPrice;
      this.contractrate.ContractId = row.contractId;
      this.rateDialogVisible = true;
    },
    //收费
    AddcontractRate () {
      this.$http
        .post(
          "Contrac/AddContractrateInfo",
          this.contractrate
        )
        .then((res) => {
          if (res.data > 0) {
            alert("收费成功");
            this.rateDialogVisible = false;
          }
        });
    },
  },
  created () {
    this.GetShowData();
  },
};
</script>

<style scoped>
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-checkbox {
  float: left;
}
</style>
<style>
.el-dropdown-menu {
  width: 500px;
}
.el-dropdown {
  margin-bottom: 10px;
}
.el-dropdown-menu--mini {
  margin-left: 22px;
}
</style>